<template>
  <div class="page">
    <!-- title and more -->
    <div
      style="display: flex;align-items: center;justify-content: space-between;margin: 12px;background-color: #ffffff;">
      <div style="font-size: 26px;">订单记录</div>
      <i class="Icon" @click="loadMoreHandle()">more_horiz</i>
    </div>
    <!-- body -->
    <div class="body">
      <div style="font-size: 14px;">最近5天的记录</div>
      <!--  -->

      <!-- order -->
      <div style="overflow-y: auto;flex: 1;padding-bottom: 12px;">
        <div v-for="(item,idx) in list" :key="idx" @click="viewHandle()">
          <div style="padding-top: 12px;">
            <div style="background-color: #FFFFFF;border: 1px solid #EBEBEB;">
              <!-- item -->
              <div
                style="display: flex;flex-direction: row;background-color: #FFFFFF;max-height: 160px;overflow: hidden;">
                <van-image :src="item.img" style="width: 200px;" fit="cover">
                </van-image>
                <div
                  style="padding: 12px;flex: 1;justify-content: space-around;display: flex;flex-direction: column;align-items: flex-end;">
                  <div style="font-size: 16px;">堂食</div>
                  <div style="height: 20px;"></div>
                  <div style="font-size: 14px;">2022-02-02</div>
                  <div style="font-size: 14px;">13-30 pm</div>
                  <div style="font-size: 14px;">$13.00</div>
                  <div style="font-size: 14px;">打包中</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    mounted() { },
    data() {
      return {
        statusNames: ["Wait pay", "Prepare", "During the meal", "Done", "Cancel"],
        list: [
          {
            orderId: "202201021800",
            time: "2022-02-03 16:33",
            price: "98.00",
            status: "0", //0 wait pay  1 prepare  2 eating 3 done 4 cancel

            img: "https://img.zcool.cn/community/01272858d8b7c8a801219c77827c87.jpg@1280w_1l_2o_100sh.jpg",
          },
          {
            orderId: "202201021800",
            time: "2022-02-03 16:33",
            price: "98.00",
            status: "2", //0 wait pay  1 prepare  2 eating 3 done 4 cancel
            img: "https://img.zcool.cn/community/0129a95c3337a0a80121df90bfc61c.jpg@1280w_1l_2o_100sh.jpg",
          },
        ],
      };
    },
    methods: {
      backHandle() {
        this.$router.replace({
          path: "/",
        });
      },
      loadMoreHandle() {
        this.$router.push({
          path: "/orderlist",
        });
      },
      viewHandle() {
        this.$router.push({
          path: "/orderdetail",
        });
      },
    },
  };
</script>


<style scoped>
  .page {
    height: 100%;
    overflow-y: auto;
    background-color: #ffffff;
  }

  .body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f6f7;
    overflow-y: auto;
  }

  .navbar {
    height: 64px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
  }

  .search {
    display: flex;
    align-items: center;
    border: 1px solid #ebebeb;
    background-color: #ffffff;
    height: 35px;
    overflow: hidden;
  }
</style>